<template>
  <div class="box">
    <h1>组件间通信7: $ref & $children & $parent</h1>

    <p ref="parsent">BABA有存款: {{money}}</p>
    <button @click='borrowMoney(100)'>找小明借钱100</button><br>
    <button @click='borrowMoney2(150)'>找小红借钱150</button><br>
    <button @click='borrowMoney3(200)'>找所有孩子借钱200</button><br>
    
    <br>
    <Son ref='son'/>

    <br>
    <Daughter ref='dau'/>
  </div>
</template>

<script>
import Son from './Son'
import Daughter from './Daughter'

export default {
  name: 'ChildrenParentTest',
  data () {
    return {
      money: 1000
    }
  },

  methods: {
    borrowMoney(num){
      const son=this.$refs.son
      // son.money -= num
      son.borrowFun(num)
      this.money += num

    },
    borrowMoney2(num){
      const dau=this.$refs.dau
      // son.money -= num
      dau.borrowFun(num)
      this.money += num
    },
    borrowMoney3(num){
      this.$children.forEach((child)=>{
        child.borrowFun(num)
        this.money += num
      })
    }
  },

  components: {
    Son,
    Daughter
  }
}
</script>

<style>

</style>
